<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.js"></script>
    <script>

        function drawChinese(config) {
            var option = {
                imgUrl: "ef9321bac0bc4c0fa5ea3ce651419a1d.PNG",
                startX: 0,
                startY: 0,
                width: 100,
                height: 100,
            };

            $.extend(option, config || {});

            var img = new Image();
            img.onload = function () {
                // 将图片画到canvas上面上去！
                ctx.drawImage(img, option.startX, option.startY, option.width, option.height);
            }

            img.src = option.imgUrl;
        }

        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            var id = ev.target.id;
            console.log(id);
            var imgUrl = $('#' + id).attr('src');
            console.log(imgUrl);
            ev.dataTransfer.setData("imgUrl", imgUrl);
        }

        function drop(ev) {
            ev.preventDefault();
            var imgUrl = ev.dataTransfer.getData("imgUrl");
            console.log(imgUrl);

            console.log(ev, "=========ev============");

            console.log(Math.floor(ev.layerX / 100), "=========Math.floor(ev.layerX / 100)============");
            console.log(Math.floor(ev.layerY / 100), "=========Math.floor(ev.layerY / 100)============");

            drawChinese({
                imgUrl: imgUrl,
                startX: 100 * Math.floor(ev.layerX / 100),
                startY: 100 * Math.floor(ev.layerY / 100),
                width: 100,
                height: 100,
            });
        }
    </script>
</head>

<body>

    <canvas id="myCanvas" ondrop="drop(event)" ondragover="allowDrop(event)"
        style="padding:10px;background: lightcoral;"></canvas>


    <div>

        <img id="1234" src="中.png" alt="" draggable="true" ondragstart="drag(event)">

    </div>

    <script>
        var c = document.getElementById("myCanvas");
        c.width = 400;
        c.height = 300;
        var ctx = c.getContext("2d");

        ctx.fillStyle = "#038387";
        ctx.fillRect(0, 0, c.width, c.height);


        var column_num = 8;
        var row_num = 5;

        var e_width = 50;
        var e_height = 50;


        var lineArr = [];

        //先画外框
        var wrap = {
            startX: 0,
            startY: 0,
            toX: c.width,
            toY: c.height
        };
        ctx.beginPath();
        ctx.strokeStyle = "blue";

        ctx.strokeRect(wrap.startX, wrap.startY, wrap.toX, wrap.toY)


        for (var r = 1; r < row_num + 1; r++) {
            var config = {
                startX: 0,
                startY: r * e_height,
                toX: c.width,
                toY: r * e_height
            };

            lineArr.push(config)
        }

        for (var col = 1; col < column_num + 1; col++) {
            var config = {
                startX: col * e_width,
                startY: 0,
                toX: col * e_width,
                toY: c.height
            };

            lineArr.push(config)
        }

        for (var i = 0; i < lineArr.length; i++) {

            var item = lineArr[i];
            //重新开始一条路径使颜色不互相影响
            ctx.save();
            ctx.beginPath();
            ctx.translate(0.5, 0.5);

            ctx.lineWidth = 1;
            //设置笔触的颜色
            ctx.strokeStyle = "blue";
            //设置开始坐标
            ctx.moveTo(item.startX, item.startY);
            //设置结束坐标
            ctx.lineTo(item.toX, item.toY);
            //绘制线条
            ctx.stroke();

            ctx.restore()

        }






     

        $(function () {
            FastClick.attach(document.body);

            drawChinese({
                imgUrl: "ef9321bac0bc4c0fa5ea3ce651419a1d.PNG",
                startX: 0,
                startY: 0,
                width: 100,
                height: 100,
            });
        });






    </script>
    <!-- http://www.diyiziti.com/maobizi -->
</body>

</html>